<template>
    <div class="wrapper">
        <div class="log">
            <img src="http://xl.9yuecloud.com/assets/img/login.a4c656a9.png" alt />
        </div>
        <div class="login">
            <van-form @submit="onSubmit">
                <van-field v-model="mobile" center clearable placeholder="请输入手机号">
                    <template #button>
                        <span @click="getCode" v-if="!flag" style="color:red">获取验证码</span>
                        <span v-else style="color:#999">获取验证码({{count}})</span>
                    </template>
                </van-field>
                <van-field v-model="sms_code" type placeholder="请输入短信验证码" />
                <div class="qie">
                    <span style="color:#999">*未注册的手机号将自动注册</span>
                    <span @click="$router.push('/login')">使用密码登录</span>
                </div>
                <div style="margin: 16px;">
                    <p class="avan-button" @click="onSubmit">登录</p>
                </div>
            </van-form>
        </div>
    </div>
</template>
  
<script>
import { getSmsloginPort, getLoginPort } from '@/api/login'
const reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
export default {
    data() {
        return {
            flag: false,
            mobile: '',
            sms_code: '',
            sms_type: 'login',
            type: 2,
            loginData: [],
            count: 10
        }
    },
    computed: {},
    created() { },
    mounted() { },
    watch: {},
    methods: {
        //   点击提交
        onSubmit(values) {
            //   console.log('submit', values)
            if (!reg.test(this.mobile)) {
                this.$Toast({
                    message: '手机号码格式不正确',
                    position: 'top',
                })
                return false
            }
            this.gettLogin()
        },
        // 点击获取验证码
        async getCode() {
            console.log(this);
            if (!reg.test(this.mobile)) {
                this.$Toast({
                    message: '手机号码格式不正确',
                    position: 'top',
                })
                return false
            }
            this.flag = true
            if (this.flag) {

                let timer = setInterval(() => {
                    console.log('---', this);
                    if (this.count > 0) {
                        return this.count--
                    } else {
                        this.flag = false
                        this.count = 10
                        clearInterval(timer)
                    }

                }, 1000)
                let res = await getSmsloginPort({ mobile: this.mobile, sms_type: this.sms_type })
                console.log(res)
                if (res.code == 200) {
                    this.$Toast({
                        message: '发送成功',
                        position: 'top',
                    })
                } else {
                    this.$Toast({
                        message: res.msg,
                        position: 'top',
                    })
                }
            }

        },
        async gettLogin() {
            let res = await getLoginPort({ mobile: this.mobile, sms_code: this.sms_code, type: this.type })
            console.log(res)
            this.$router.push({ name: 'setpass', params: { mobile: this.mobile, sms_code: this.sms_code } })
            if (res.code == 200) {
                this.loginData = res.data
                localStorage.setItem('token', res.data.remember_token)
                console.log(res);
                this.$router.push({ name: 'setpass', params: { mobile: this.mobile, sms_code: this.sms_code } })
            } else {
                this.$Toast({
                    message: res.msg,
                    position: 'top',
                })
            }
        }
    },
    components: {}
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    box-sizing: border-box;
    width: 100%;
    padding: 40px;
    background: #fff;
    font-size: 16px;

    .log {
        width: 100%;
        padding: 20px 0 50px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 525px;
            height: 115px;
        }
    }

    .login {
        width: 100%;
        font-size: 20px;

        .qie {
            width: 90%;
            padding: 20px 0 20px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
        }
    }

    .van-field {
        height: 73px;
        padding: 0 40px 0 0;
        font-size: 24px;
        display: flex;
        align-items: center;

        input {
            height: 73px;
        }
    }

    .avan-button {
        width: 82vw;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        color: #fff;
        text-align: center;
        border-radius: 40px;
        background-image: linear-gradient(to right, #f5b65e, #eb7834);
    }

}
</style>
  